import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import PropTypes from 'prop-types'
import {
  BsHouseDoorFill,
  BsHouseDoor,
  BsBagFill,
  BsBag,
  BsPersonFill,
  BsPerson,
  BsChatDots,
  BsChatDotsFill,
  BsTag,
  BsTagFill,
  BsStar,
  BsStarFill
} from 'react-icons/bs'
import {history} from 'umi'

import './index.less'
import {storage} from '@/utils'


const style = {fontSize: '1.5em'}

export default class MenuBar extends Component {

  constructor(props) {
    super(props)
    this.state = {
      item: []
    }
  }

  switchTabBar(val) {
    switch (val) {
      case '/house':
        return {
          title: '民宿',
          selectedIcon: <BsHouseDoorFill style={style}/>,
          icon: <BsHouseDoor style={style}/>,
          link: '/house'
        }
      case '/comment':
        return {
          title: '论坛',
          selectedIcon: <BsChatDotsFill style={style}/>,
          icon: <BsChatDots style={style}/>,
          link: '/comment'
        }
      case '/appointment':
        return {
          title: '预约',
          selectedIcon: <BsTagFill style={style}/>,
          icon: <BsTag style={style}/>,
          link: '/appointment'
        }
      case '/collection':
        return {
          title: '收藏',
          selectedIcon: <BsStarFill style={style}/>,
          icon: <BsStar style={style}/>,
          link: '/collection'
        }
      case '/order':
        return {
          title: '订单',
          selectedIcon: <BsBagFill style={style}/>,
          icon: <BsBag style={style}/>,
          link: '/order'
        }
      case '/user':
        return {
          title: '我的',
          selectedIcon: <BsPersonFill style={style}/>,
          icon: <BsPerson style={style}/>,
          link: '/user'
        }
    }
  }

  componentDidMount() {
    const menus = storage.get('menus') || []
    const item = menus.map(item => (this.switchTabBar(item.url)))
    this.setState(() => ({
      item
    }))
  }

  render() {
    const {show, pathname} = this.props

    return (
      <div className='menu-bar'>
        <TabBar hidden={!show}>
          {this.state.item.map(item => (
            <TabBar.Item
              key={item.link}
              title={item.title}
              icon={item.icon}
              selectedIcon={item.selectedIcon}
              selected={pathname === item.link}
              onPress={() => {
                history.push(item.link)
              }}
            />
          ))}
        </TabBar>
      </div>
    )
  }
}

MenuBar.defaultProps = {
  show: false,
  pathname: ''
}

MenuBar.propTypes = {
  show: PropTypes.bool,
  pathname: PropTypes.string
}

